<div class="c-content-inner">
    <div class="row">
        <div class="col-md-12">
            <p class="c-line-title">可排序表格</p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <div class="form-group row">
                <label class="col-md-3 col-form-label text-right">姓名：</label>
                <div class="col-md-9">
                    <input type="text" class="form-control" placeholder="请输入姓名...">
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="form-group row">
                <label class="col-md-3 col-form-label text-right">邮箱：</label>
                <div class="col-md-9">
                    <input type="text" class="form-control" placeholder="请输入姓名...">
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="form-group">
                <button class="btn btn-primary" (click)="search();"><i class="fa fa-search fa-fw"></i> 查询</button>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <p class="c-line-title"></p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">

            <div #sdt="simpleDataTable" c-simple-data-table>
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th class="text-center c-w-1">
                                序号
                            </th>
                            <th class="text-center c-w-1">
                                <c-simple-data-sort sortBy="name">姓名</c-simple-data-sort>
                            </th>
                            <th class="text-center c-w-2">
                                <c-simple-data-sort sortBy="email">邮箱</c-simple-data-sort>
                            </th>
                            <th class="text-center c-w-3">
                                <c-simple-data-sort sortBy="age">年龄</c-simple-data-sort>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let item of sdt.data;let i = index">
                            <td class="text-center">{{i+1}}</td>
                            <td class="text-center">{{item.name}}</td>
                            <td class="text-center">{{item.email}}</td>
                            <td class="text-center">{{item.age}}</td>
                        </tr>
                    </tbody>

                </table>
                <c-simple-data-http-page #hp [url]="url" method="'post'" [param]="param" [pageList]="pageList" [btnCls]="btnCls"></c-simple-data-http-page>
            </div>

        </div>
    </div>

    <div class="row c-mt15">
        <div class="col-md-12">
            <p class="c-line-title">列表</p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <div class="form-group row">
                <label class="col-md-3 col-form-label text-right">姓名：</label>
                <div class="col-md-9">
                    <input type="text" class="form-control" placeholder="请输入姓名...">
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="form-group row">
                <label class="col-md-3 col-form-label text-right">邮箱：</label>
                <div class="col-md-9">
                    <input type="text" class="form-control" placeholder="请输入姓名...">
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="form-group">
                <button class="btn btn-primary" (click)="search2();"><i class="fa fa-search fa-fw"></i> 查询</button>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <p class="c-line-title"></p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">

            <div #sdt2="simpleDataTable" c-simple-data-table>
                <ul class="list-group">
                    <li class="list-group-item" *ngFor="let item of sdt2.data;let i = index">
                        {{i+1}}，姓名：{{item.name}}，邮箱：{{item.email}}，年龄：{{item.age}}
                    </li>
                </ul>
                <div class="c-mt15">
                    <c-simple-data-http-page #hp2 [url]="url2" method="'post'" [param]="param2" [pageList]="pageList2" [btnCls]="btnCls2"></c-simple-data-http-page>
                </div>

            </div>

        </div>
    </div>


    <div class="row">
        <div class="col-md-12">
            <div class="c-mt15">
                <p class="c-line-title">说明</p>
                组件目录:src/app/modules/shared/simple-data-table
            </div>
        </div>
    </div>

</div>